<template>
  <div class="miandetal-wrap">
    <p class="miandetal-bor">商城 > 详情 > <span>多功能背包</span></p>
    <div class="miandetal-wrap-deal">
      <div class="miandetal-deal-box">
        <div class="left">
          <img :src="bigpic.imagesrc" alt="" v-if="shows"/>
          <div class="small-pic">
            <img :src="items.imagesrc" alt=""  v-for="(items,index) in smallList" v-if="shows" @click="smallBig(items)"/>
          </div>
        </div>
      </div>
      <div class="right-wrap" v-for="(item,index) in listshop">
        <h2>{{item.title}}</h2>
        <div class="right-wrap-cen">
          <p>{{item.xianjia}} <s>￥{{item.yuanjia}}</s></p>
        </div>
        <p class="right-wrap-one">服务：· 正版授权《售后服务》</p>
        <p class="right-wrap-two">说明：该商品由第三方卖家提供</p>
        <p class="btn-wrap-buy" @click="open">立即抢购</p>
      </div>
    </div>

    <!-- 详情介绍 -->
    <div class="detalpage-wrap">
      <p>图文详情</p>
      <div class="detalpage-wrap-pic" v-for="(item) in detalwrap">
        <span>商品名称：{{item.title}}</span>
        <span>数量：{{item.num}}</span>
        <span>价格：{{item.yuanjia}}</span>
        <span>品牌：{{item.pingpai}}</span>
        <span>产地：{{item.chandi}}</span>
      </div>
    </div>
    <div class="detalpage-wrap-pic-detals" v-for="(itema,index) in jsimage">
      <img :src="itema.jsimg" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "miandetal",
  data() {
    return {
      shows:false,
      listshop:[],
      smallList:[],
      bigpic:'',
      jsimage:[],
      detalwrap:[]
    };
  },
  mounted() {},
  methods: {
    detalI(sid) {
      this.$http.get("/shopdetalT",{
        params:{
          sid:sid
        }
      })
        .then((res) => {
          this.listshop = res.data
          this.detalwrap = res.data
          // console.log(this.detalwrap);
        })
        .catch((err) => {
          console.log(err);
        });


        // 查询小图
        this.$http.get("/shopsmall",{
          params:{
            lid:sid
          }
        })
        .then((res) => {
          this.smallList = res.data
          this.bigpic = res.data[0]

          this.shows = true
          // 解决图片过早渲染报错问题
          
        })
        .catch((err) => {
          console.log(err);
        });


        // 查询介绍图
        this.$http.get("/shopimg",{
          params:{
            sid:sid
          }
        })
        .then((res) => {
          // console.log(res.data);
          this.jsimage = res.data
          
        })
        .catch((err) => {
          console.log(err);
        });
    },
    smallBig(item){
      // console.log(item);
      this.bigpic = item
    },
    open() {
        this.$alert('该商品暂无存货 =_=', '抱歉', {
          confirmButtonText: '确定',
          // callback: action => {
          //   console.log(123);
          // }
        });
      }
  },
  created() {
    let sid = this.$route.query.ids;
    console.log(sid);
    this.detalI(sid);
  },
};
</script>

<style lang="scss" scoped>
.miandetal-wrap {
  box-sizing: border-box;
  padding: 50px 20px;
  width: 1100px;
  min-height: 600px;
  /* background: rgb(100, 176, 219); */
  margin: 90px auto;
  .miandetal-bor {
    font-size: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgb(209, 208, 208);
  }
  .miandetal-wrap-deal {
    display: flex;
    justify-content: space-between;
    width: 1100px;
    height: 540px;
    margin-top: 40px;
    .miandetal-deal-box {
      width: 440px;
      height: 540px;
      img {
        width: 438px;
        height: 438px;
      }
      .small-pic {
        margin-top: 10px;
        width: 438px;
        height: 76px;
        display: flex;
        justify-content: space-between;
        img {
          width: 76px;
          height: 76px;
        }
      }
    }
  }
}
.right-wrap {
  width: 620px;
  height: 540px;
  /* background: rgb(207, 83, 83); */
  h2 {
    font-size: 30px !important;
    font-weight: 500;
    padding: 25px 0 25px 0;
  }
  .right-wrap-cen {
    width: 620px;
    height: 100px;
    background: #f4f4f4;
    p {
      color: #ef3c36;
      font-size: 50px;
      line-height: 100px;
      s {
        color: #888585;
        font-size: 30px;
      }
    }
  }
  .right-wrap-one {
    color: rgb(141, 138, 138);
    margin: 40px 0;
    font-size: 20px;
  }
  .right-wrap-two {
    color: rgb(224, 65, 65);
    margin: 20px 0;
    font-size: 15px;
  }
}
.btn-wrap-buy {
  width: 200px;
  height: 60px;
  border-radius: 30px;
  text-align: center;
  line-height: 60px;
  background: #ef3c36;
  color: #fff;
  font-size: 20px;
  margin: 50px 0;
}
.detalpage-wrap {
  width: 1100px;
  min-height: 300px;
  /* background: rgb(196, 152, 152); */
  margin-top: 100px;
  p {
    font-size: 30px;
    color: #888585;
    border-bottom: 1px solid rgb(201, 201, 201);
    padding-bottom: 15px;
  }
  .detalpage-wrap-pic {
    width: 1100px;
    height: 166px;
    background: #c7c4c4;
    border-radius: 5px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding-left: 10px;
    span {
      color: #5a5959;
      font-weight: bold;
    }
  }
}
.detalpage-wrap-pic-detals {
  margin: 0 auto;
  width: 1100px;
  display: flex;

  justify-content: center;
  img {
    width: 640px;
  }
}
</style>
